<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Development Manual</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script type="text/javascript" src="../js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="../js/underscore.js"></script>
<script type="text/javascript" src="../js/backbone.js"></script>

<link href="../css/layout2.css" media="all" rel="stylesheet" />
<link href="../css/slide.css" media="all" rel="stylesheet" />
<link href="../css/font.css" media="all" rel="stylesheet" />
<link href="../css/devaid.css" media="all" rel="stylesheet" />
</head>
<body>

<script type="text/javascript">

$(function(){

	test1();
	test2();
  
});

function test1() {
	
  //ListView class: Our main app view.

    var ListView = Backbone.View.extend({
      el: $('body'), // attaches `this.el` to an existing element.

  	//initialize(): Automatically called upon instantiation. Where you make all types of bindings, excluding UI events, such as clicks, etc.

      initialize: function(){
        _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods

         this.render(); // not all views are self-rendering. This one is.
      },

  	//render(): Function in charge of rendering the entire view in this.el. Needs to be manually called by the user.

      render: function(){
        $(this.el).append("<div>hello world</li> </div>");
      }
    });

  	//listView instance: Instantiate main app view.

    var listView = new ListView();
}

function test2() {
	var ListView = Backbone.View.extend({
	    el: $('body'), // el attaches to existing element
	
	//events: Where DOM events are bound to View methods. Backbone doesn't have a separate controller to handle such bindings; it all happens in a View.

	    events: {
	      'click button#add': 'addItem'
	    },
	    initialize: function(){
	      _.bindAll(this, 'render', 'addItem'); // every function that uses 'this' as the current object should be in here

	      this.counter = 0; // total number of items added thus far
	      this.render();
	    },
	
	//render() now introduces a button to add a new list item.

	    render: function(){
	      $(this.el).append("<button id='add'>Add list item</button>");
	      $(this.el).append("<ul></ul>");
	    },
	
	//addItem(): Custom function called via click event above.

	    addItem: function(){
	      this.counter++;
	      $('ul', this.el).append("<li>good night "+this.counter+"</li>");
	    }
	  });

	  var listView = new ListView();
}

</script>

</body>
</html>